<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //拖拽div
        //原理:拖拽过程中,鼠标的位置与div左边和上边的距离,因此可以通过 鼠标坐标-原有距离 来算出拖拽后的位置

        window.onload = function () {
            let oDiv1 = document.getElementById('div1');
            let oDiv2 = document.getElementById('div2');

            oDiv1.onmousedown = function (ev) {

                let currentMousePosition = getPosition(ev);

                let offsetX = currentMousePosition.x - oDiv1.offsetLeft;    //鼠标位置与div1边框产生的偏移量,移动中这个偏移量是固定的
                let offsetY = currentMousePosition.y - oDiv1.offsetTop;


                //低版本的浏览器会出现鼠标移出div后无法拖拽得问题,因此鼠标移动的事件需要绑定再document上
                document.onmousemove = function (ev) {

                    if (oDiv1.offsetLeft <= 0) oDiv1.style.left = 0 + 'px';
                    currentMousePosition = getPosition(ev);

                    //防止div跑出边界
                    //如果希望不跑出可视范围,则修改oDiv2.offsetWidth → window.innerWidth
                    let moveRangeX = oDiv2.offsetWidth;
                    let moveRangeY = oDiv2.offsetHeight;

                    //可吸附距离,最小为0则没有吸附效果
                    let adsorptionRange = 50;


                    //2层嵌套的三元
                    oDiv1.style.left = (
                        (currentMousePosition.x - offsetX) >= adsorptionRange ?
                            (moveRangeX - (currentMousePosition.x + (oDiv1.offsetWidth - offsetX)) > adsorptionRange?
                                currentMousePosition.x - offsetX : (moveRangeX - oDiv1.offsetWidth))
                            : 0
                    ) + 'px';

                        oDiv1.style.top = (
                            (currentMousePosition.y - offsetY) >= adsorptionRange ?
                            (moveRangeY - (currentMousePosition.y + (oDiv1.offsetHeight - offsetY)) > adsorptionRange?
                                currentMousePosition.y - offsetY : (moveRangeY - oDiv1.offsetHeight) )
                            : 0
                    )+ 'px';


                };
                //如果移动过程中鼠标移出了窗口区会导致div一直跟着鼠标,因此按下的虽然div,但是抬起事件需要与document绑定
                document.onmouseup = function () {
                    document.onmousemove = null;    //取消鼠标移动事件
                };

                //此处返回false很有用处,他阻止了其他mousedown时触发的事件,否则会发生按下后拖拽时选中其他元素
                return false;
            };
        };

        //其他效果:
        //1.虚框移动
        //鼠标拖动div后出现虚线框,鼠标移动时移动的是虚框,本体div并不会动,移动完后将div移动到虚线框的位置,虚线框消失
        //点击div后生成一个同大小的虚线框,然后移动的是虚线框,移动完毕后让虚线框消失
        //练习,略

        //2.滑动条
        //通过↑这个移动限制其实可以做出一个滑动条
        //获取滑动条滚动的百分比可以创造一个自定义的滚动条
        //练习,略


        //获取当前鼠标的坐标(框架),返回json
        function getPosition(ev) {
            return {
                x : document.documentElement.scrollLeft + ev.clientX,
                y : document.documentElement.scrollTop + ev.clientY
            };
        }



    </script>

    <style>
        #div1 {
            background: salmon;
            width: 200px;
            height: 200px;
            position: absolute;
        }

        #div2 {
            background: cadetblue;
            width: 1000px;
            height: 600px;
            position: absolute;
        }
    </style>
</head>

<body>

<div>

    <div id="div2">
        <div id="div1">sfsdfsdfsdfsdfsfds</div>


        <div>sfsfsfsfds</div>
        <div>sfsfsfsfds</div>
        <div>sfsfsfsfds</div>
        <div>sfsfsfsfds</div>
        <div>sfsfsfsfds</div>

    </div>



</div>

</body>
</html>